<template>
<div class="CLdiv1" :style="LetTop_Influence">
    <div class="CLdiv2" :style="CLdiv2[0]" @click="div2Btn(0)"><img src="../../../../../assets/ttimg/fire.png" class="img1"> 热销</div>
    <div class="CLdiv2" :style="CLdiv2[1]" @click="div2Btn(1)"><img src="../../../../../assets/ttimg/zan.png" class="img1"> 推荐</div>
    <div class="CLdiv2" :style="CLdiv2[2]" @click="div2Btn(2)"><img src="../../../../../assets/ttimg/discount.png" class="img1"> 优惠</div>
    <div class="CLdiv2" :style="CLdiv2[3]" @click="div2Btn(3)">新品上市</div>
    <div class="CLdiv2" :style="CLdiv2[4]" @click="div2Btn(4)">小吃类</div>
    <div class="CLdiv2" :style="CLdiv2[5]" @click="div2Btn(5)">小炒类</div>
    <div class="CLdiv2" :style="CLdiv2[6]" @click="div2Btn(6)">调味区</div>
    <div class="empty" :style="CLdiv2[7]"></div>
</div>
</template>

<script>
export default {
    name:'C1Left',
    data(){
        return{
            CLdiv2:['background-color: white','border-top-right-radius: 10px;'],
            scroll:0,
            LetTop_Influence:'',
        }
    },
    methods:{
        div2Btn(value){
            this.CLdiv2=[]
            switch (value) {
                case 0:
                    this.$bus.$emit('LefttoDad',170)
                    this.CLdiv2[0]='background-color: white'
                    this.CLdiv2[1]='border-top-right-radius: 10px;'
                    break;
                case 1:
                    this.$bus.$emit('LefttoDad',579)
                    this.CLdiv2[1]='background-color: white'
                    this.CLdiv2[2]='border-top-right-radius: 10px;'
                    this.CLdiv2[0]='border-bottom-right-radius: 10px;'
                    break;
                case 2:
                    this.$bus.$emit('LefttoDad',986)
                    this.CLdiv2[2]='background-color: white'
                    this.CLdiv2[3]='border-top-right-radius: 10px;'
                    this.CLdiv2[1]='border-bottom-right-radius: 10px;'
                    break;
                case 3:
                    this.$bus.$emit('LefttoDad',1400)
                    this.CLdiv2[3]='background-color: white'
                    this.CLdiv2[4]='border-top-right-radius: 10px;'
                    this.CLdiv2[2]='border-bottom-right-radius: 10px;'
                    break;
                case 4:
                    this.$bus.$emit('LefttoDad',1813)
                    this.CLdiv2[4]='background-color: white'
                    this.CLdiv2[5]='border-top-right-radius: 10px;'
                    this.CLdiv2[3]='border-bottom-right-radius: 10px;'
                    break;
                case 5:
                    this.$bus.$emit('LefttoDad',2224)
                    this.CLdiv2[5]='background-color: white'
                    this.CLdiv2[6]='border-top-right-radius: 10px;'
                    this.CLdiv2[4]='border-bottom-right-radius: 10px;'
                    break;
                case 6:
                    this.$bus.$emit('LefttoDad',2637)
                    this.CLdiv2[6]='background-color: white'
                    this.CLdiv2[7]='border-top-right-radius: 10px;'
                    this.CLdiv2[5]='border-bottom-right-radius: 10px;'
                    break;
                default:
                    break;
            }
        }
    },
    watch:{
        scroll(value){
            if(value >= 169){
                this.LetTop_Influence='position: fixed;top: 50px;'
            }else{
                this.LetTop_Influence=''
            }
        }
    },
    mounted(){
        this.$bus.$on('scroll',(value)=>{
            this.scroll=value
        })
        this.$bus.$on('RighttoLeft',(value)=>{
            this.CLdiv2=[]
            switch (value) {
                case 0:
                    this.CLdiv2[0]='background-color: white'
                    this.CLdiv2[1]='border-top-right-radius: 10px;'
                    break;
                case 1:
                    this.CLdiv2[1]='background-color: white'
                    this.CLdiv2[2]='border-top-right-radius: 10px;'
                    this.CLdiv2[0]='border-bottom-right-radius: 10px;'
                    break;
                case 2:
                    this.CLdiv2[2]='background-color: white'
                    this.CLdiv2[3]='border-top-right-radius: 10px;'
                    this.CLdiv2[1]='border-bottom-right-radius: 10px;'
                    break;
                case 3:
                    this.CLdiv2[3]='background-color: white'
                    this.CLdiv2[4]='border-top-right-radius: 10px;'
                    this.CLdiv2[2]='border-bottom-right-radius: 10px;'
                    break;
                case 4:
                    this.CLdiv2[4]='background-color: white'
                    this.CLdiv2[5]='border-top-right-radius: 10px;'
                    this.CLdiv2[3]='border-bottom-right-radius: 10px;'
                    break;
                case 5:
                    this.CLdiv2[5]='background-color: white'
                    this.CLdiv2[6]='border-top-right-radius: 10px;'
                    this.CLdiv2[4]='border-bottom-right-radius: 10px;'
                    break;
                case 6:
                    this.CLdiv2[6]='background-color: white'
                    this.CLdiv2[7]='border-top-right-radius: 10px;'
                    this.CLdiv2[5]='border-bottom-right-radius: 10px;'
                    break;
                default:
                    break;
            }
        })
    },
    beforeDestroy(){
        this.$bus.$off('scroll')
        this.$bus.$off('RighttoLeft')
    }
}
</script>

<style scoped>
.CLdiv1{
    margin-right: 10px;
    width: 80px;
    text-align: center;
    font-size: 12px;
    padding-bottom: 300px;
}
.img1{
    width: 12px;
}
.CLdiv2{
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: rgb(245, 245, 245);
}
.empty{
    height: 350px;
    background-color: rgb(245, 245, 245);
}
</style>